<template>
    <p>watch vs watchEffect</p>
    <p>{{ state.name }} {{ state.age }}</p>
</template>

<script setup>
import { reactive, watchEffect, getCurrentInstance, onMounted } from "vue";
const state = reactive({
    name: "大伟聊前端",
    age: 21,
});

// 初始化时，一定会执行一次（收集要监听的数据）
watchEffect(() => {
    console.log("hello watchEffect");
});

// 监听 state.name
watchEffect(() => {
    console.log("state.name", state.name);
});

// 监听 state.age
watchEffect(() => {
    console.log("state.age", state.age);
});

setTimeout(() => {
    state.age = 25;
}, 1500);

setTimeout(() => {
    state.name = "聊前端";
}, 3000);

// 获取当前实例
const instance = getCurrentInstance();
console.log("instance", instance);

// 挂载完成 => 通过 instance.data.x 获取 x 的值
onMounted(() => {
    // 挂载完也没有 this => undefined
    console.log("this in onMounted", this);
    console.log("name", instance.ctx.$data);
});
</script>
